<template>
  <div class="login_container">
    <!--登录盒子-->
    <div class="login_box">
      <!--图片logo区域-->
      <div class="avatar_box">
        <img src="@/assets/images/logo.png">
      </div>
      <!--登录表单区域  :rules="rules"  表单校验对象 -->
      <el-form ref="formRef" class="login_form" :model="form" :rules="formRules">
        <!--用户名  prop 指定验证规则-->
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-user" v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-lock" type="password" v-model="form.password"
                    placeholder="请输入密码"></el-input>
        </el-form-item>
        <!--验证码-->
        <el-form-item prop="code">
          <el-input prefix-icon="el-icon-key" v-model="form.code" placeholder="点击图片切换验证码"
                    style="width: 300px; margin-right: 10px"></el-input>
          <img :src="captchaUrl" @click="getCaptcha" alt="" width="100" height="40" style="float: right;">
        </el-form-item>
        <!--按钮区域-->
        <el-form-item>
          <el-button type="primary" class="btn" @click="formSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>


</template>






<script>
import {captcha,login} from "@/api/user";

export default {
  name: "LoginView",
  data(){
    return{
      captchaUrl:'',
      form:{
        username:'',
        password:'',
        code:'',
        uuid:''
      },
      formRules:{
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 15, message: '长度在6 到 15 个字符', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'}
        ]
      }
    }
  },
  methods:{
    // 切换验证码回调函数
    getCaptcha(){
        captcha().then((response)=>{
           let {image,uuid}=response.data;
           this.captchaUrl='data:image/png;base64,'+image;
           this.form.uuid=uuid;
        })

    },
    // 表单提交
    formSubmit(){
      this.$refs.formRef.validate(valid => {
        if (valid) {
          login(this.form).then(response=>{
            if (response.code===0){
              let{token,nickName,s1} = response.data;
              //保持用户信息
              sessionStorage.setItem('token',token);
              sessionStorage.setItem('nickName',nickName);
              sessionStorage.setItem('s1',s1);

              this.$message.success(response.message);
              //跳转路由
              this.$router.push('/index').catch(error=>{});
            }
          }).catch(error=>{
            this.$message.error("请求失败")
          })
        }
      })
    }
  },
  created(){
    this.getCaptcha()
  }
}
</script>


<style scoped>
.login_container {
  background-color: rgb(26, 160, 148);
  height: 100vh;
}

.login_box {
  width: 450px;
  height: 380px;
  background-color: #fff;
  border-radius: 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 15px #fff;
}

.login_box > .avatar_box {
  height: 70px;
  width: 70px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 2px 2px 20px #2b4b6b;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
}

.avatar_box > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: scale(1.3);
}

.avatar_box:hover {
  transform: translate(-50%, -50%) rotate(360deg);
  transition: transform 0.5s linear;
  cursor: pointer;
}

.btn {
  width: 100%;
}

.login_form {
  position: absolute;
  bottom: 30px;
  border-bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 0 20px;
}


</style>